<template>
	<view class="seach" :class="['qn-page-' + theme]">
		<view class="search_input">
			<u-search placeholder="请输入关键字" v-model="keyword" shape="square" :clearabled="true" bg-color="#f4f4f4" @search="search" @custom="search"></u-search>
		</view>
		<view class="search_content">
			<view class="search_title">热门搜索</view>
			<view style="display: flex;flex-wrap: wrap;">
				<text class="search_title_content" v-for="(item, index) in recommend" :key="index" @click="search(item.name)">{{ item.name }}</text>
			</view>
		</view>
		<view class="search_content" v-if="historyList.length">
			<view class="search_title clearfix">
				<view class="float_left">历史搜索</view>
				<view class="float_right clear-btn" @click="clearHistory">清除记录</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<text class="search_title_content" v-for="(item, index) in historyList" :key="index" @click="search(item)">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			historyList: []
		};
	},
	computed: {
		recommend() {
			return this.$store.state.basicSet.recommend;
		}
	},
	onShow() {
		this.historyList = uni.getStorageSync('history_search') || [];
	},
	methods: {
		search(name) {
			if (!name && !this.keyword) {
				this.$u.toast('请输入您要搜索的商品关键字');
				return;
			}
			const key = name || this.keyword;
			const history = this.historyList.indexOf(key) === -1 ? [...this.historyList, key] : this.historyList;
			uni.setStorageSync('history_search', history);
			this.goPage('/pages/search/SearchResult?keyword=' + key, 'redirectTo');
		},
		clearHistory() {
			uni.removeStorageSync('history_search');
			this.historyList = [];
		}
	}
};
</script>

<style lang="scss">
.seach {
	background-color: #fff;
	height: 100vh;
	.search_input {
		padding: 20upx 36upx;
		border-bottom: 1px solid #f4f4f4;
	}
	.search_content {
		margin-top: 30upx;
		padding: 0 36upx;
		.search_title {
			font-weight: 560;
			.clear-btn {
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
		.search_title_content {
			background-color: #f4f4f4;
			padding: 0 26upx;
			text-align: center;
			font-size: 24upx;
			height: 50upx;
			font-weight: 400;
			line-height: 50upx;
			margin: 30upx 30upx 0 0;
			border-radius: 4px;
		}
	}
}
</style>
